<template>
  <div style="max-width: 1200px;margin: 0 auto;padding: 20px;
  font-family: 'Microsoft Yahei'">
    <!-- 搜索卡片 -->
    <el-card style="height: 70px;margin: 5px;">
      <el-form :inline="true">
        <el-form-item label="考试搜索" style="width: 270px;">
          <el-input placeholder="请输入考试名称"
          v-model="searchExam.examName"
          @keydown.enter="loadExam"></el-input>
        </el-form-item>
        <el-form-item label="考试状态" style="width: 270px;">
          <el-select placeholder="请选择考试状态"
          v-model="searchExam.status"
          @change="loadExam">
            <el-option label="所有状态" value=""></el-option>
            <el-option label="待开始" value="0"></el-option>
            <el-option label="进行中" value="1"></el-option>
            <el-option label="已结束" value="2"></el-option>
            <el-option label="已出分" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadExam">查询</el-button>
        </el-form-item>
      <el-button type="primary" style="float:right;">班级考试</el-button>
      </el-form>
    </el-card>

    <!-- 考试列表 -->
    <div style="display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;">
      <div style="border: 1px solid #eee;padding: 15px;
        border-radius: 4px;background: #fff;"
           v-for="exam in examArr" :key="exam.examName">
        <h3 class="exam-title">{{ exam.examName}}</h3>
        <p class="exam-info">考试描述：{{ exam.examDesc }}</p>
        <p class="exam-info">开始时间：{{ exam.startTime }}</p>
        <p class="exam-info">结束时间：{{ exam.endTime }}</p>
        <p style="margin: 5px 0; font-size: 14px; color: #666;">
          考试状态：<span :style="{
        color: statusStyle[exam.status].color,fontWeight: 'bold',
        fontSize: '15px'}">{{statusMap[exam.status]}}
    </span>
        </p>
        <div class="exam-meta">
          <span class="meta-item">时长：{{ exam.duration}}分钟</span>
          <span class="meta-item">总分：{{ exam.totalScore }}</span>
          <span class="meta-item">及格分：{{ exam.passScore }}</span>
          <el-button
              type="primary"
              @click="goToExam(exam.examId, exam.status)">
          {{ exam.status === '2' || exam.status === '3' ? '查看详情' : '进入考试' }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
//TODO 对于已结束和已出分的考试，按钮应该是查看详情
import {onMounted, ref} from 'vue';
import qs from 'qs';
import axios from "axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
const searchExam = ref({examName:'',status:''});
const examArr = ref([]);
const loadExam = ()=>{
  let data =qs.stringify(searchExam.value);
  axios.get(BASE_URL+'/v1/exam/select?'+data).then((res)=>{
    if (res.data.code == 200){
      examArr.value = res.data.data;
      console.log(examArr.value);
    }else{
      ElMessage.error(res.data.message);
    }
  })
}
onMounted(()=>{
  loadExam();
})
const resetSearch =()=>{
  searchExam.value = {examName:'',status:''};
  loadExam();
}
const statusMap = ref({
  0: '待开始',
  1: '进行中',
  2: '已结束',
  3: '已出分'
});
const statusStyle = ref({
  0: { color: '#ff7d00' },
  1: { color: '#00b42a' },
  2: { color: '#86909c' },
  3: { color: '#1890ff' }
});
//跳转准备考试/详情页面的函数
const goToExam = (examId, status) => {
  router.push({
    path: '/examP',
    query: { examId: examId }
  });
// TODO 对于已结束已出分的考试，应该跳转到其他页面
};
</script>
















<style scoped>
.exam-title {
  color: #0066cc;
  margin-top: 0;
  margin-bottom: 10px;
}
.exam-info {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}
.status {
  color: #00cc66;
}
.exam-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.meta-item {
  font-size: 14px;
  color: #333;
}
</style>
